@baseFont:50;
body {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
}
.goods_line {
    float: left;
    width: (2rem / @baseFont);
    height: 100%;
    line-height: 0;
    background-color: #f2f2f2;
}
.open_app {
    position: relative;
    height: (100rem / @baseFont);
    width: (750rem / @baseFont);
    margin: 0 auto;
    min-width: 320px;
    max-width: 750px;
    a:first-child {
        position: absolute;
        top: (30rem / @baseFont);
        left: (20rem / @baseFont);
        height: (30rem / @baseFont);
        width: (30rem / @baseFont);
        background: url(../images/head-close.png) no-repeat;
        background-size: (30rem / @baseFont);
    }
    a:nth-child(2) {
        position: absolute;
        top: 0;
        right: 0;
        height: (100rem / @baseFont);
        width: (200rem / @baseFont);
    }
    img {
        display: block;
        width: (750rem / @baseFont);
    }
}
.header {
    width: (750rem / @baseFont);
    margin: 0 auto;
    background-color: #ffdb47;
    .title_content {
        display: flex;
        margin: 0 (34rem / @baseFont);
        .classify,
        .sign_in {
            display: block;
            margin: (18rem / @baseFont) 0;
            width: (36rem / @baseFont);
            height: (60rem / @baseFont);
        }
        .title_main {
            display: block;
            flex: 1;
            padding-top: (10rem / @baseFont);
            text-align: center;
            img {
                height: (76rem / @baseFont);
            }
            
        }
    }
    .search {
        display: block;
        padding: (14rem / @baseFont) 0;
        a {
            display: block;
            position: relative;
            margin: 0 auto;
            padding-left: (64rem / @baseFont);
            width: (702rem / @baseFont);
            height: (64rem / @baseFont);
            line-height: (64rem / @baseFont);
            color: #999999;
            font-size: (28rem / @baseFont);
            border-radius: (78rem / @baseFont);
            background-color: #fff;
            .search_icon {
                position: absolute;
                top: (14rem / @baseFont);
                left: (16rem / @baseFont);
                height: (36rem / @baseFont);
                width: (36rem / @baseFont);
                background: url(../images/search.png) no-repeat;
                background-size: (36rem / @baseFont);
            }
        }
    }
}
.banner {
    position: relative;
    height: (230rem / @baseFont);
    width: (750rem / @baseFont);
    margin: 0 auto;
    background-color: #fff;
    .banner_bg {
        display: block;
        height: (230rem / @baseFont);
        width: (750rem / @baseFont);
    }
    .banner_main {
        overflow: hidden;
        position: absolute;
        top: 0;
        left: (25rem / @baseFont);
        width: (700rem / @baseFont);
        height: (230rem / @baseFont);
        border-radius: (24rem / @baseFont);
        .current {
            width: (20rem / @baseFont);
            background-color: #fff;
        }
        ul {
            width: 700%;
            height: 100%;
            transition: all .5s;
            li {
                float: left;
                width: (700rem / @baseFont);
                height: (230rem / @baseFont);
            }
        }
        ol {
            position: absolute;
            bottom: (15rem / @baseFont);
            left: 50%;
            transform: translateX(-50%);
            li {
                transition: all .5s;
                float: left;
                margin: 0 (5rem / @baseFont);
                width: (10rem / @baseFont);
                height: (10rem / @baseFont);
                background-color: #808584;
                border-radius: (5rem / @baseFont);
            }
        }
        img {
            display: block;
            position: absolute;
            bottom: 0;
            height: (368rem / @baseFont);
            width: (750rem / @baseFont);
        }
    }
}
.nav {
    width: (750rem / @baseFont);
    margin: (20rem / @baseFont) auto 0;
    ul li {
        float: left;
        width: (150rem / @baseFont);
        height: (142rem / @baseFont);
        a {
            display: block;
            text-align: center;
            font-size: (22rem / @baseFont);
            color: #666;
            .nav_icon {
                margin: 0 auto;
                width: (84rem / @baseFont);
                height: (84rem / @baseFont);
                img {
                    width: (84rem / @baseFont);
                    height: (84rem / @baseFont);
                };
            }
        }
    }
}
.new_user {
    height: (234rem / @baseFont);
    width: (750rem / @baseFont);
    margin: (20rem / @baseFont) auto 0;
    a {
        overflow: hidden;
        display: block;
        float: left;
        height: (234rem / @baseFont);
    }
    a:first-child {
        box-sizing: content-box;
        width: (373.5rem / @baseFont);
        img {
            width: (373.5rem / @baseFont);
            height: (234rem / @baseFont);
        }
    }
    a:nth-child(n+2) {
        box-sizing: content-box;
        width: (186.25rem / @baseFont);
        img {
            width: (186.25rem / @baseFont);
            height: (234rem / @baseFont);
        }
    }
}
.shop_main {
    overflow: hidden;
    width: (702rem / @baseFont);
    margin: (20rem / @baseFont) auto (140rem / @baseFont);
    background-color: #fff;
    border-radius: (20rem / @baseFont);
    .main {
        width: (702rem / @baseFont);
        height: (280rem / @baseFont);
        .goods {
            float: left;
            height: (280rem / @baseFont);
            padding: (20rem / @baseFont);
            width: (350rem / @baseFont);
            h4 {
                font-size: (28rem / @baseFont);
                font-weight: 700;
                line-height: (40rem / @baseFont);
            }
            .goods_box {
                position: absolute;
                bottom: -(4rem / @baseFont);
                left: 0;
                width: (150rem / @baseFont);
                height: (54rem / @baseFont);
                line-height: (80rem / @baseFont);
                font-size: (24rem / @baseFont);
                color: #333;
                background: url(../images/goods_name.png);
                background-size: (150rem / @baseFont) (54rem / @baseFont);
            }
            p {
                font-size: (24rem / @baseFont);
                line-height: (40rem / @baseFont);
                color: #999;
            }
            ul {
                width: (350rem / @baseFont);
            }
            ul li {
                float: left;
                padding: (10rem / @baseFont);
                height: (170rem / @baseFont);
                width: (160rem / @baseFont);
                a {
                    position: relative;
                    display: block;
                    height: 100%;
                    width: 100%;
                    font-size: (26rem / @baseFont);
                    color: #f50;
                    text-align: center;
                    img {
                        width: (120rem / @baseFont);
                    }
                }
            }
        }
    }
    .recommend {
        .re_title {
            float: left;
            width: (200rem / @baseFont);
            height: (172rem / @baseFont);
            padding-top: (60rem / @baseFont);
            text-align: center;
            h4 {
                font-size: (32rem / @baseFont);
                font-weight: 700;
                color: #444;
            }
            p {
                font-size: (24rem / @baseFont);
                color: #999;
            }
        }
        ul li {
            float: left;
            width: (120rem / @baseFont);
            height: (172rem / @baseFont);
            text-align: center;
            padding-top: (20rem / @baseFont);
            a {
                img {
                    width: (100rem / @baseFont);
                    height: (100rem / @baseFont);
                }
                span {
                    font-size: (20rem / @baseFont);
                }
            }
        }
    }
}
.footer {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: (100rem / @baseFont);
    width: (750rem / @baseFont);
    background-color: #fff;
    ul li {
        float: left;
        width: (150rem / @baseFont);
        height: (100rem / @baseFont);
        a {
            display: block;
            padding: (10rem / @baseFont) 0;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: (20rem / @baseFont);
            font-weight: 700;
            img {
                width: (48rem / @baseFont);
                height: (48rem / @baseFont);
            }
        }
    }
}